<template>
	<div class="selectClassContainer" v-if="studentdetailprop">
		<el-dialog	
			  :visible.sync="isShow"			 
			  custom-class="el-dialog-bg"
			  :close-on-click-modal="modalclose"
			  :before-close="handleClose">
			  <div slot="title" class="panel_title">学员选班</div>
	          <div class="selectClassdetail" v-if="studentdetailprop.courseStatus!=5">
	          	<div class="dialog">
		          	<div class="detailitem" >
		          		<span class="spanlabel">姓名：</span>
		          		<span class="spanlabelweight">{{studentdetailprop.realName}}</span>
		          	</div>
		          	<div class="detailitem contentEllipsis">
		          		<span class="spanlabel">课程名称：</span>
		          		<span class="spanlabelweight">{{studentdetailprop.courseName}}</span>
		          		&nbsp;&nbsp;
		          		<span class="spanlabel">备注：</span>	 
						<span class="spanlabelweight">
							{{studentdetailprop.remark}}
						</span>	 
		          	</div>
		          	<div class="detailitem">
		          		<span class="spanlabel">班级信息：</span>	 
		          		<template>
						    <el-select v-model="classtext" style="width:4rem;" @change="showList" filterable placeholder="请输入关键词搜索">				
							    <el-option
							      v-for="item in classList"
							      :key="item.classId"
							      :label="item.className"
							      :value="item.classId">
							      <span style="float: left">{{ item.className }}</span>						      
							      <span style="float: right; color: #8492a6; font-size: 13px">{{item.recruitNum}}</span>
							      <span style="float: right; color: #8492a6; font-size: 13px">{{item.studentNum}}/</span>
							    </el-option>						
						    </el-select>
						</template>
						
		          	</div>
		            <div class="selectClassRecord" v-if="!selectIsNo" ><!--v-if="recordList.length>0"-->
	                   <table class="classdetail" border="0" cellpadding="0" cellspacing="0">
	                   	     <tr>
	                   	     	<td width="13%"><span class="spanlabel">课程名称：</span></td>
	                   	     	<td><span class="spanlabelweight">{{selectclass.courseName||""}}</span></td>
	                   	     </tr>
	                   	     <tr>
	                   	     	<td><span class="spanlabel">科目：</span></td>
	                   	     	<td><span class="spanlabelweight">{{selectclass.subjectName||""}}</span></td>
	                   	     </tr>
	                   	     <tr>
	                   	     	<td><span class="spanlabel">课程类型：</span></td>
	                   	     	<td>
	                   	     		<span class="spanlabelweight" v-if="selectclass.courseType==1">一对一</span>
	                   	     		<span class="spanlabelweight" v-else-if="selectclass.courseType==2">班课(全日/半日)</span>
	                   	     		<span class="spanlabelweight" v-else-if="selectclass.courseType==3">课时</span>
									<span class="spanlabelweight" v-else-if="selectclass.courseType==4">双师</span>
									<span class="spanlabelweight" v-else-if="selectclass.courseType==5">线上</span>
	                   	     	</td>
	                   	     </tr>
	                   	     <tr>
	                   	     	<td><span class="spanlabel">授课模式：</span></td>
	                   	     	<td>
	                   	     		<span v-if="selectclass.courseMode==1"><span class="spanlabelweight">小班</span></span>
	                   	     		<span v-else-if="selectclass.courseMode==2"><span class="spanlabelweight">中班</span></span>
	                   	     		<span v-else-if="selectclass.courseMode==3"><span class="spanlabelweight">大班</span></span>
	                   	     	</td>
	                   	     </tr>
	                   	     <tr>
	                   	     	<td><span class="spanlabel">上课时间：</span></td>
	                   	     	<td>
	                   	     		<span class="spanlabelweight">{{selectclass.startTime}}</span>-<span class="spanlabelweight">{{selectclass.endTime}}</span><br>
	                   	     		<span v-if="selectclass.courseType!=2" class="spanlabelweight" v-for="item in selectclass.classSyllabusTime">
	                   	     			{{item}}<br>
	                   	     		</span>	 
	                   	     		<span class="spanlabelweight" v-if="selectclass.courseType==2">
	                   	     				{{selectclass.dayStartTime}}-{{selectclass.dayEndTime}}
	                   	     		</span>
	                   	     	</td>
	                   	     </tr>
	                   	     <tr>
	                   	     	<td></td>
	                   	     	<td>
	                   	     		<span class="spanlabel">教师：</span><span class="spanlabelweight">{{selectclass.teacherUserName}}</span>
	                   	     		<span class="spanlabel">助教：</span><span class="spanlabelweight">{{selectclass.assisUserName}}</span>
	                   	     		<span class="spanlabel">教室：</span><span class="spanlabelweight">{{selectclass.classRoomName}}</span>
	                   	     	</td>
	                   	     </tr>
	
	                   </table>
	            </div>
	            </div>
	          </div>
	          <div class="selectClassdetail" v-else><!--停课重新选班-->
	          	<div class="dialog">
		          	<div class="detailitem" >
		          		<span class="spanlabel">姓名：</span>
		          		<span class="spanlabelweight">{{studentdetailprop.realName}}</span>
		          	</div>
		            <div class="detailitem">
		          		<span class="spanlabel">课程名称：</span>
		          		<span class="spanlabelweight">{{studentdetailprop.courseName}}</span>
		          	</div>
		          	<div class="detailitem">
		          		<span class="spanlabel">班级信息：</span>	 
		          		<template>
						    <el-select v-model="classtext" style="width:4rem;" @change="showList" filterable placeholder="请输入关键词搜索">				
							    <el-option
							      v-for="item in classList"
							      :key="item.classId"
							      :label="item.className"
							      :value="item.classId">
							      <span style="float: left">{{ item.className }}</span>						      
							      <span style="float: right; color: #8492a6; font-size: 13px">{{item.recruitNum}}</span>
							      <span style="float: right; color: #8492a6; font-size: 13px">{{item.studentNum}}/</span>
							    </el-option>						
						    </el-select>
						</template>
	          	    </div>
	                <div class="line"></div>
	                <div class="enterclassrecord">
	                	<div class="title"><span class="spanlabelweight">进班记录：</span></div>
	                	<div class="record">
	                		
	                		<template>
								    <el-table
								      :data="enterClasslist"
								      style="width: 100%">
								      <el-table-column
								        prop="courseStatus"
								        align="center"
								        width="60"
								        label="状态">
								        <template slot-scope="scope">
							        		<span v-if="scope.row.courseStatus==1">待上课</span>
									      	<span v-else-if="scope.row.courseStatus==2">上课中</span>
									      	<span v-else-if="scope.row.courseStatus==3">已退费</span>
									      	<span v-else-if="scope.row.courseStatus==4">已退课</span>
									      	<span v-else-if="scope.row.courseStatus==5">停课</span>
								        </template>
								      </el-table-column>								      
								      <el-table-column
								        prop="realName"
								        align="center"
								        label="学员名称"
								        >
								      </el-table-column>
								      <el-table-column
								        prop="className"
								        align="center"
								        label="班级名称"
								        >
								      </el-table-column>
								      <el-table-column
								        prop="createTime"
								        align="center"
								        label="进班时间">
								      </el-table-column>
								      <el-table-column
								        prop="useCourseHour"
								        align="center"
								        label="已上课时(课时)">
								      </el-table-column>
								      
								    </el-table>
						  </template>
	                	</div>
	                </div>
	            </div>    
	          </div>
		      <div slot="footer" class="footer-btn">
		      	 <el-button @click="btnCancel" class="btnCancel">取 消</el-button>
    			 <el-button v-if="selectIsNo" style="cursor:not-allowed;color: #999999;background-color: #dedede;" class="btnOk">确定选班</el-button>
    			 <el-button v-else @click="btnOk" class="btnOk">确定选班</el-button>
		      </div>
		</el-dialog>
		
		<!-- 班级详情-->
		<classdetail></classdetail>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
	import classdetail from './classdetail'
	let vm;
	export default{
		props:["studentdetailprop"],
		components: {
		  	classdetail
		  },
		data(){
			return {
				modalclose:false,
				selectIsNo:true,//显示选择班级信息
				classtext:'',//班级名称
				selectclass:null//选择的班级对象
				
			}
		},
		methods:{
			/**初始化数据**/
			dialogInit(){
				this.selectIsNo=true;
				this.classtext="";
			},
			handleClose(){
				console.log(this.classList)
				this.dialogInit();
				this.$store.dispatch('selectClass/hideselectClassPanel');	
			},
			btnCancel(){
				this.dialogInit();
				this.$store.dispatch('selectClass/hideselectClassPanel');	
			},
			btnOk(){	
				
				let paras=[{
					    oldClassId:this.enterClasslist[0].classId||0,
					    studentId:this.studentdetailprop.studentId,
						classId:this.selectclass.classId,
						studentTuitionMode:'1',
						coursePackageId:this.selectclass.coursePackageId,
						studentCourseId:this.studentdetailprop.studentCourseId,
				   }]
				//console.log(paras);
				api.studentEnterClass(paras).then(function(data){
					
					if(data.result=="操作成功"){
						 vm.$message({
				          message: '进班成功',
				          type: 'success'
				        });
				        
				        vm.dialogInit();				       
						vm.$store.dispatch('selectClass/hideselectClassPanel');							
						vm.$store.dispatch('classdetail/getClassInfo',{classId:paras[0].classId});	//获取进班班级信息
						vm.$parent.initData();
					}
				})
				
			},
			showList(val){
			  
				this.selectclass=null;
				for(let i =0;i<this.classList.length;i++){
					if(val==this.classList[i].classId){
						this.selectclass=this.classList[i];
					}
				}
				
				
				this.selectIsNo=false;		
			
			}
			
		},
		computed:{
		
    	 ...mapState({                            
					  isShow:state=>state.selectClass.selectClassDialog					
					}),
		 ...mapGetters("selectClass",{
		 	           classList:"getClassList"
		 }),
		 enterClasslist:function(){
		 	let classlist=[];
		 	
		 	classlist.push({
		 		    classId:this.studentdetailprop.classId,
			 		realName:this.studentdetailprop.realName,
			 		className:this.studentdetailprop.className,
			 		createTime:this.studentdetailprop.createTime,
			 		useCourseHour:this.studentdetailprop.useCourseHour,
			 		courseStatus:this.studentdetailprop.courseStatus
		 	})
		 	
		 	return classlist;
		 }
     },
     mounted(){
     	 vm = this;
     
     }
	}
</script>

<style lang="scss">
	@import "@/style/module/utils.scss";
	.selectClassContainer{
		
		.selectClassdetail{
			width:100%;
			height:auto;
			padding:0 .3rem 0 .3rem;
			.detailitem{
				width:100%;
				height: .5rem;				
				line-height: .5rem;	
				.input-box{
					width:3rem;					
					position: relative;
					display: inline-block;										
					span{
						float: left;
					}
					.selecttext{
						float: left;
						width:2rem;	
						height: .3rem;	
						margin-top:.1rem;
						border-radius: 5px;	
						border:1px solid #DEDEDE;	
						background: #FFFFFF;
						.downicon{
							width:.2rem;
							height: .2rem;
							float: right;
							margin-right:0.015rem;						
							background: url(../../../assets/img/common/left_arrow_down.png);
							background-size: cover;
							margin-top:0.05rem;
							opacity: .5;
						}		
						
					}
					ul {
						width: 2rem;
					    height: auto;
					    position: absolute;
					    left: .3rem;
					    top: .3rem;
						
						li{
							width:2rem;
							height: .3rem;
							line-height: .3rem;
							background: red;
							list-style-type: none;
						}
					}
				}
						
			}
			.line{
				width: inherit;
				height: 1px;
				margin:.1rem 0 .1rem 0;
				background: #DEDEDE;
			}
			.enterclassrecord{
				max-height: 1.5rem;
			    width: inherit;			
			    .title{
			    	width: inherit;
			    	height: .2rem;
			    	line-height: .2rem;
			    }
			    .record{
			    	width: inherit;
			    	height: 1rem;				    
			    }
			}
			.selectClassRecord{
				width:inherit;
				margin-left: .8rem;
				max-height: 3rem;	
				margin-top:.2rem;
				margin-bottom: .2rem;			
				.classdetail{
					width:100%;
					height: 100%;
				}
				
			}
		}
		
		/**自定义对话框标题样式**/
		/**自定义对话框标题样式**/
		.panel_title{				
			padding:.23rem .31rem .23rem .31rem;
			font-size: .22rem;	
		    font-family: "microsoft yahei";
		    color: #333333;		
		}
		/**
		 * 自定义对话框样式
		 */
		.el-dialog-bg{
			background: #FFFFFF;
			width:8rem;
			border-radius: .1rem;
			.el-dialog__header{
				padding: 0px;
			}
			.el-dialog__body{
				padding: 0px !important;
			}	
			.el-dialog__footer{
				padding: .3rem;
				.footer-btn{
					width:100%;
					text-align: center;									
			   }
			}		
		}
		
	}
</style>